<template>
  <div class="container">
    <toolbar :title="$route.meta.title" rightText="保存" :back="true" @handleRightTextClick="rightTextClick"></toolbar>

    <section class="t-container _m-2 p-2_" v-if="isText">
      <cube-input v-model="value" placeholder="请输入修改的内容"></cube-input>
    </section>
    <section class="t-container _m-2 p-2_" v-else-if="isRadio">
      <cube-radio-group v-model="value" :options="options" />
    </section>
    <section class="t-container _m-2 p-2_" v-else>
      <cube-upload
        ref="upload"
        v-model="files"
        :action="action"
        @files-added="addedHandler"
        @file-error="errHandler"
        @file-success="fileSuccess"
      >
        <div class="clear-fix">
          <cube-upload-file v-for="(file, i) in files" :file="file" :key="i"></cube-upload-file>
          <cube-upload-btn :multiple="false">
            <div>
              <i>＋</i>
              <p>选择上传的头像</p>
            </div>
          </cube-upload-btn>
        </div>
      </cube-upload>
    </section>
  </div>
</template>

<script>
import Toolbar from "../../../components/Toolbar";

import {show} from 'utils/Base'
import {config} from 'assets/js/data'

import {deleteFile} from 'api/UtilsApi'
import {updateUsers} from 'api/UsersApi'

export default {
  name: "EditText",
  components: {
    Toolbar
  },
  props: {
    text: String
  },
  data() {
    return {
      value: '',
      form: {
        avator: "",
        nickName: "",
        sex: ''
      },
      action: process.env.VUE_APP_UTILS_URL + "/api/file/uploads",
      files: [],
      options: ['男', '女']
    };
  },
  computed: {
    isText() {
      return this.text == "nickName" ? true : false;
    },
    isRadio() {
      return this.text == "sex" ? true : false;
    }
  },
  methods: {
    rightTextClick() {
      if(this.text != 'avator') {
        this.form[this.text] = this.value;
      } else {
        this.form.avator = this.files[0].response.data[0]
        deleteFile({
          module: config.module.UTILS,
          key: this.value
        }).then(res => {
          console.info(res);
        });
      }
      updateUsers(this.form)
        .then(res => {
          if(res.meta.success) {
            show('修改成功');
            this.$router.back(-1);
          }
        });
    },
    addedHandler() {
      const file = this.files[0];
      file && this.$refs.upload.removeFile(file);
    },
    errHandler(file) {
      show('文件上传失败')
    },
    fileSuccess (file) {
      console.info(file);
    }
  },
  created () {
    this.value = this.$route.query.q
    if(this.text == 'avator') {
      this.files.push({
        response: {
          data: [this.value]
        },
        url: this.value
      })
    }
  }
};
</script>

<style lang="stylus" scoped>
section {
  background: #FFF;
  padding: 5vw 2vw 0 2vw;
}

/ >>> .cube-input {
  &::after {
    border: none;
    border-bottom: 3PX solid $colorPrimary;
  }
}

/ >>> .cube-upload {
  .cube-upload-file, .cube-upload-btn {
    margin: 0;
    height: 400px;
  }

  .cube-upload-file {
    margin: 0;

    + .cube-upload-btn {
      margin-top: -400px;
      opacity: 0;
    }
  }

  .cube-upload-file-def {
    width: 100%;
    height: 100%;

    .cubeic-wrong {
      display: none;
    }
  }

  .cube-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    > div {
      text-align: center;
    }

    i {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      margin-bottom: 20px;
      font-size: 32px;
      line-height: 1;
      font-style: normal;
      color: #fff;
      background-color: #333;
      border-radius: 50%;
    }
  }
}

.border-top-1px, .border-right-1px, .border-bottom-1px, .border-left-1px {
  position static
}
</style>
